import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import HeaderBar from 'COMPONENT/HeaderBar';
import {Icon, SearchBar, Grid} from 'antd-mobile'
import {Link} from 'react-router'

export default class Home extends React.Component {
	static contextTypes = {
    router: PropTypes.object.isRequired
  }

	
  constructor(props) {
    super(props);
    
	const rentData = ['整租','合租','独立公寓','月租','地图找房',
'大学生公寓','联系我们'];
	const rentImgData = ['ershoufang','haiwai','lvju','maifang','xiaoqu','xinfang','zhuangxiu','zufang','ershoufang','haiwai','lvju','moreCate'];
	
	const data = Array.from(new Array(rentData.length)).map((_val, i) => ({
	  icon:'./imgs/'+rentImgData[i]+'.png',
	  text: rentData[i],
	  url:'http://wepay.test.bankcomm.com/services/cloud/resources/reap-realestate-rent/customer/index.html#/home?openId=1234'
	  
	}));
    
    this.state = {
    	slideActive:false,
		data:data,
		list:[
            {'name':'xx公寓.保利叶之林(一期)','lou':'安居通  12.2m²','money':'1830元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(二期)','lou':'安居通  12.2m²','money':'1630元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'安居通  12.2m²','money':'1430元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'安居通  12.2m²','money':'1530元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(五期)','lou':'安居通  12.2m²','money':'1330元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'安居通  12.2m²','money':'1130元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'安居通  12.2m²','money':'1630元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'安居通  12.2m²','money':'1860元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'安居通  12.2m²','money':'1680元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'}
        ]
	}

  }
	
  componentWillMount() {
    //获取token
  }

  
  search=()=>{
    this.context.router.push({
        pathname: '/RentHouse/HouseList'
    })

  }
  	
  	//
  	menuJumpAction = (event,el) =>{
		
		let text = event['text'];
		if(text.indexOf('大学生公寓') >-1){
			this.context.router.push({
				pathname: '/RentHouse/RentApply'
			});
			return false;
		}

		
	}
	
	jumpToDetailPage = () => {
		this.context.router.push({
			pathname: '/RentHouse/HouseDetail'
		});
	}

	//筛选条件
	filterHouse = (type) => {
		let{slideActive} = this.state;
		this.setState({
			slideActive: !slideActive
		})
	}
	
	closeFilter = (event) => {
		let elm = event.target;
		event.preventDefault();
		event.stopPropagation();
		let{slideActive} = this.state;
		
		if($(elm).hasClass('slideMenu')){
			this.setState({
				slideActive: !slideActive
			})
		}

		
	}
	
	filterOk = () => {
		this.setState({
			slideActive: false
		})
	}
	
	backs () {
		window.history.back(-1);  	
       	return false;
	}
  render() {
  	let {data, list, slideActive} = this.state;
  	let listGroup;
  	let _this = this;
	let activeClass = slideActive==true?' active':'';
    listGroup=list.map((item, index)=>{
        return(
            <li onClick={_this.jumpToDetailPage.bind(this)}>
                <img src={item.img} alt=""/>
                <div>
                    <h2>{item.name}</h2>
                    <p>
                    	<span>{item.lou}</span>
                    	<span className='address'>

	                    	{item.address}
                    	</span>
                    </p>

                    <div className='button'>
                        <a>近地铁</a> <a>新上</a> <a>随时看房</a>
                    </div>
                    <div className='money'>{item.money}</div>
                </div>
            </li>
        )
    })

	

    return (

      <div className="lifeService" style={{padding:'0'}}>
        <div className='header'  style={{background:'#fff',zIndex:'99'}}>
 		    <img  onClick={this.backs} src="./imgs/iconfont-6.png" style={{
	    	    height: '.4rem',
			    marginTop: '.25rem',
			    marginLeft: '.2rem'

 		    }} />
      	
 		    <span onClick={this.backs} style={{color:'transparent',
 		        color: 'transparent',
			    height: '.9rem',
			    display: 'inline-block',
			    marginTop: '-0.3rem'}}>返回</span>
 		    <div className = "loginStateHeader" onClick={this.backs}>

 		    
 		    </div>
			<input className="header_title"
				placeholder="你想住在哪儿?"
				style={{
					boxShadow: '#666 0 0 6px',
				    width: '69%',
				    margin: '0 auto 0',
				    marginTop: '.22rem',
				    left: '.8rem',
				    lineHeight:'.4rem',
				    textAlign:'left',
				    paddingLeft:'.2rem'
				}}/>

				



		</div>
		<div style={{height:'.9rem'}}></div>

        <Grid data={data} hasLine={false} 
          onClick={(el,index) =>{_this.menuJumpAction(el,index)}} 
          />
          
        <div className='lifeServiceBox'>

            <ul>
                <li>
                    <p>日常保洁</p>
                    <span>高温蒸汽杀菌</span>
                    <img src="./imgs/dd2.png" alt=""/>
                </li>
                <li>
                    <p>xx保洁卡</p>
                    <span>买1000赠100</span>
                    <img src="./imgs/dd3.png" alt=""/>
                </li>
                <li>
                    <p>除螨保洁</p>
                    <span>标杆级除螨设备</span>
                    <img src="./imgs/dd1.png" alt=""/>
                </li>
                <li>
                    <p>双人沙发</p>
                    <span>高颜值家具</span>
                    <img src="./imgs/dd4.png" alt=""/>
                </li>
            </ul>
        </div>

        <div  className="filterBtn" style={{
        	height:'1rem',
        	padding:'0'
        }}>
         <div style={{
         	position:'absolute',
         	left:'.3rem',
         	padding:'.3rem',fontSize:'.4rem',fontWeight:'600',padding:'0',
         	color:'#333'
         }}>全部房源</div>
        
        
        
       <div onClick={this.filterHouse.bind(this)}>筛选</div>

       </div>


        <div className='homeList'>
            <ul>
                {listGroup}
            </ul>

        </div>
        
        <section className = {classnames("slideMenu ",activeClass)} 
        	
        onClick={this.closeFilter.bind(this)}>
        	<div className="filterBtn">
    			<div className=" btn clearFilter" onClick={this.filterOk.bind(this)}>清除</div>
    			<div className="btn btnSure" onClick={this.filterOk.bind(this)}>确定</div>
    		</div>
    		
        	<div className="cates" style={{height:'100%',overflow:'auto'}}>
        	
        		<section className="per_cate">
        			<div className="cate_title">房源亮点</div>
        			<p>
	        			<span >近地铁</span>
	        			<span >精装修</span>
	        			<span >免中介费</span>
	        			<span >押一付一</span>
	        			<span >新上</span>
	        			<span >认证公寓</span>
	        			<span >随时看房</span>

        			</p>
        		</section>
        		<section className="per_cate">
        			<div className="cate_title">品牌</div>
        			<p>
	        			<span >安居通</span>
	        			<span >大学生公寓</span>
	        			<span >海外公寓</span>

        			</p>
        		</section>
        		<section className="per_cate">
        			<div className="cate_title">服务保障</div>
        			<p>
	        			<span >品质认证</span>
	        			<span >在线签约</span>

        			</p>
        		</section>
        		<section className="per_cate">
        			<div className="cate_title">租期</div>
        			<p>
	        			<span >月租</span>
	        			<span >年租</span>

        			</p>
        		</section>
        		<section className="per_cate">
        			<div className="cate_title">电梯</div>
        			<p>
	        			<span >无电梯</span>
	        			<span >有电梯</span>

        			</p>
        		</section>
        		
        	</div>
       		
        </section>
		



      </div>
    );
  }
}
